<template>
  <swiper
    navigation
    :space-between="50"
    :modules="modules"
    :autoplay="swiperOptions.autoplay"
    :pagination="swiperOptions.pagination"
  >
    <swiper-slide v-for="item in tableData" :key="item.title">
      <img :src="item.path" class="swiper-img"/>
    </swiper-slide>
  </swiper>
</template>

<script>
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/controller";
import "swiper/css/autoplay";


import {
  Pagination,
  Autoplay,
  Controller,
} from "swiper";

import { Swiper, SwiperSlide } from "swiper/vue";

// https://swiperjs.com/swiper-api#autoplay

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      modules: [ Pagination, Autoplay, Controller],
      swiperOptions: {
        autoplay: {
          delay: 3000,
          pauseOnMouseEnter: true,
          disableOnInteraction: false,
        },
        pagination: {
          clickable: true,
          bulletActiveClass: "active-class",
          bulletClass: "bullet-class",
        },
      },
      tableData: [
        {
          path: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242306111155-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656124391&t=9d2e17bd219fba25d82031c5b361c936",
          title: "图片1",
        },
        {
          path: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F113020142315%2F201130142315-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656124391&t=b7df399e8f6bac0f017bc7523285055c",
          title: "图片2",
        },
        {
          path: "https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&step_word=&hs=0&pn=2&spn=0&di=7084067677328637953&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=2564179107%2C1689612712&os=2652735736%2C521729233&simid=2564179107%2C1689612712&adpicid=0&lpn=0&ln=1685&fr=&fmq=1653532389177_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F21061109241GT3-0-lp.jpg%26refer%3Dhttp%3A%2F%2Fimg.jj20.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Dauto%3Fsec%3D1656124459%26t%3Db7f8ee95f32d05634b0e997faf61539a&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3B33da_z%26e3Bv54AzdH3FprAzdH3Fnn9nbc_z%26e3Bip4s&gsm=2&rpstart=0&rpnum=0&islist=&querylist=&nojc=undefined&dyTabStr=MCwzLDYsMSw0LDIsNSw3LDgsOQ%3D%3D",
          title: "图片3",
        },
        {
          path: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F063021120F9%2F210630120F9-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656124459&t=901b2e4077cccaf04479d5784e7ce792",
          title: "图片4",
        },
      ],
    };
  },
};
</script>

<style>
.active-class {
  background-color: #ff0000 !important;
}

.bullet-class {
  width: 20px;
  height: 8px;
  display: inline-block;
  border-radius: 30%;
  background-color: rgb(0, 0, 0);
  opacity: 0.2;
  margin-right: 5px;
}

.swiper {
    height: 400px;
}

.swiper-img {
    height: 100%;
    width: 100%;
}
</style>